<template>
  <a-card>
    <div style="display: flex;flex-direction: column">
      <a-space style="margin-bottom: 10px">
        <a-button-group>
          <template v-for="(value,type) in paperTypes">
            <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">
              {{ type }}
            </a-button>
          </template>
          <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
            <div slot="content">
              <a-input-group compact style="margin: 10px 10px">
                <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
                         placeholder="宽(mm)"/>
                <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                         placeholder="~" disabled
                />
                <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
                         placeholder="高(mm)"/>
              </a-input-group>
              <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
            </div>
            <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
          </a-popover>
        </a-button-group>
        <a-button type="text" icon="zoom-out" @click="changeScale(false)"></a-button>
        <a-input-number
          :value="scaleValue"
          :min="scaleMin"
          :max="scaleMax"
          :step="0.1"
          disabled
          style="width: 70px;"
          :formatter="value => `${(value * 100).toFixed(0)}%`"
          :parser="value => value.replace('%', '')"
        />
        <a-button type="text" icon="zoom-in" @click="changeScale(true)"></a-button>
        <a-button type="primary" icon="redo" @click="rotatePaper()">旋转</a-button>
        <a-popconfirm
          title="是否确认清空?"
          okType="danger"
          okText="确定清空"
          @confirm="clearPaper"
        >
          <a-icon slot="icon" type="question-circle-o" style="color: red"/>
          <a-button type="danger">
            清空
            <a-icon type="close"/>
          </a-button>
        </a-popconfirm>
        <a-button type="primary" @click="exportJson">
          保存
        </a-button>
      </a-space>
    </div>
    <a-row :gutter="[8,0]">
      <a-col :span="4">
        <a-card style="height: 100vh">
          <a-row>
            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
              <a-row class="drag_item_title">拖拽组件列表</a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.text" style>
                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                      <p class="glyphicon-class">文本</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.image" style>
                      <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                      <p class="glyphicon-class">图片</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.longText">
                      <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
                      <p class="glyphicon-class">长文</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.tableCustom" style>
                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                      <p class="glyphicon-class">表格</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.html" style="">
                      <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
                      <p class="glyphicon-class">html</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.customText" style>
                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                      <p class="glyphicon-class">自定义</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row class="drag_item_title">辅助</a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.hline" style>
                      <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                      <p class="glyphicon-class">横线</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.vline" style>
                      <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                      <p class="glyphicon-class">竖线</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.rect">
                      <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                      <p class="glyphicon-class">矩形</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box" tid="defaultModule.text">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.oval">
                      <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                      <p class="glyphicon-class">椭圆</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="15">
        <a-card class="card-design">
          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
        </a-card>
      </a-col>
      <a-col :span="5" class="params_setting_container">
        <a-card>
          <a-row class="hinnn-layout-sider">
            <div id="PrintElementOptionSetting"></div>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import {defaultElementTypeProvider, hiprint} from '@/hiprint/index'
import { getTemplate ,updateDataById } from "@/api/assembly/print";
// disAutoConnect();

let hiprintTemplate;

export default {
  name: "Design",
  data() {
    return {
      deactivated: false,
      curPaper: {
        type: 'A4',
        width: 210,
        height: 296.6
      },
      paperTypes: {
        'A3': {
          width: 420,
          height: 296.6
        },
        'A4': {
          width: 210,
          height: 296.6
        },
        'A5': {
          width: 210,
          height: 147.6
        },
        'B3': {
          width: 500,
          height: 352.6
        },
        'B4': {
          width: 250,
          height: 352.6
        },
        'B5': {
          width: 250,
          height: 175.6
        }
      },
      // 自定义纸张
      paperPopVisible: false,
      paperWidth: '220',
      paperHeight: '80',
      // 缩放
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      // 导入导出json
      jsonIn: '',
      jsonOut: '',
      panels: [],
      params: {
        id:0,
      },
    }
  },
  computed: {
    curPaperType() {
      let type = 'other'
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let {width, height} = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    }
  },
  activated() {
    if (this.deactivated) {
      this.init();
      this.deactivated = false;
    }
  },
  deactivated() {
    this.deactivated = true;
  },
  mounted() {
    const id = this.$route.params && this.$route.params.id;
    if(id){
      this.params.id = id;
      /*Obfuscated by*/getTemplate(id)['then'](_0x381de2=>{this['panels']=JSON['parse'](_0x381de2['data']['data']['replace']('\x27',''));this['init'](this['panels']);});
    }
  },
  methods: {
    init() {
      hiprint.init({
        providers: [new defaultElementTypeProvider()]
      });
      // 还原配置
      hiprint.setConfig()
      // 替换配置
     /*Obfuscated by */hiprint['setConfig']({'optionItems':[(function(){function _0x387523(){this['name']='scale';}return _0x387523['prototype']['css']=function(_0x53558e,_0x5d844c){if(_0x53558e&&_0x53558e['length']){if(_0x5d844c)return _0x53558e['css']('transform','scale('+_0x5d844c+')');}return null;},_0x387523['prototype']['createTarget']=function(_0x499881,_0x162bc3,_0x47d8ec){return this['target']=$('<div\x20class=\x22hiprint-option-item\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<div\x20class=\x22hiprint-option-item-label\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20缩放\x0a\x20\x20\x20\x20\x20\x20\x20\x20</div>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<div\x20class=\x22hiprint-option-item-field\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<input\x20type=\x22number\x22\x20class=\x22auto-submit\x22/>\x0a\x20\x20\x20\x20\x20\x20\x20\x20</div>\x0a\x20\x20\x20\x20</div>'),this['target'];},_0x387523['prototype']['getValue']=function(){var _0x149d75=this['target']['find']('input')['val']();if(_0x149d75)return parseFloat(_0x149d75['toString']());},_0x387523['prototype']['setValue']=function(_0x91676){this['target']['find']('input')['val'](_0x91676);},_0x387523['prototype']['destroy']=function(){this['target']['remove']();},_0x387523;}()),(function(){function _0x31c1f4(){this['name']='zIndex';}return _0x31c1f4['prototype']['css']=function(_0x19621f,_0x557446){if(_0x19621f&&_0x19621f['length']){if(_0x557446)return _0x19621f['css']('z-index',_0x557446);}return null;},_0x31c1f4['prototype']['createTarget']=function(){return this['target']=$('<div\x20class=\x22hiprint-option-item\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<div\x20class=\x22hiprint-option-item-label\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20元素层级2\x0a\x20\x20\x20\x20\x20\x20\x20\x20</div>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<div\x20class=\x22hiprint-option-item-field\x22>\x0a\x20\x20\x20\x20\x20\x20\x20\x20<input\x20type=\x22number\x22\x20class=\x22auto-submit\x22/>\x0a\x20\x20\x20\x20\x20\x20\x20\x20</div>\x0a\x20\x20\x20\x20</div>'),this['target'];},_0x31c1f4['prototype']['getValue']=function(){var _0x554daf=this['target']['find']('input')['val']();if(_0x554daf)return parseInt(_0x554daf['toString']());},_0x31c1f4['prototype']['setValue']=function(_0x392d57){this['target']['find']('input')['val'](_0x392d57);},_0x31c1f4['prototype']['destroy']=function(){this['target']['remove']();},_0x31c1f4;}())],'movingDistance':2.5,'text':{'tabs':[{'name':'样式','options':[{'name':'scale','after':'transform','hidden':![]}]}],'supportOptions':[{'name':'styler','hidden':!![]},{'name':'scale','after':'transform','hidden':![]},{'name':'formatter','hidden':!![]}]},'image':{'tabs':[{'replace':!![],'name':'基本','options':[{'name':'field','hidden':![]},{'name':'src','hidden':![]},{'name':'fit','hidden':![]}]}]}});
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
      $('#hiprint-printTemplate').empty()
      let that = this;
      /*Obfuscated by */hiprintTemplate=new hiprint['PrintTemplate']({'template':that['panels'],'onImageChooseClick':_0x5d6b06=>{setTimeout(()=>{_0x5d6b06['refresh']('',{'real':!![]});},0xd8662^0xd8dda);},'fontList':[{'title':'微软雅黑','value':'Microsoft\x20YaHei'},{'title':'黑体','value':'STHeitiSC-Light'},{'title':'思源黑体','value':'SourceHanSansCN-Normal'},{'title':'王羲之书法体','value':'王羲之书法体'},{'title':'宋体','value':'SimSun'},{'title':'华为楷体','value':'STKaiti'},{'title':'cursive','value':'cursive'}],'dataMode':0x1,'history':!![],'onDataChanged':(_0x8f4088,_0x10a11e)=>{},'onUpdateError':_0x2d8748=>{},'settingContainer':'#PrintElementOptionSetting','paginationContainer':'.hiprint-printPagination'});
      hiprintTemplate.design('#hiprint-printTemplate');
      // 获取当前放大比例, 当zoom时传true 才会有
      this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = {type: type, width: value.width, height: value.height}
          hiprintTemplate.setPaper(value.width, value.height)
        } else {
          this.curPaper = {type: 'other', width: value.width, height: value.height}
          hiprintTemplate.setPaper(value.width, value.height)
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`)
      }
    },
    otherPaper() {
      let value = {}
      value.width = this.paperWidth
      value.height = this.paperHeight
      this.paperPopVisible = false
      this.setPaper('other', value)
    },
    changeScale(big) {
      let scaleValue = this.scaleValue;
      if (big) {
        scaleValue += 0.1;
        if (scaleValue > this.scaleMax) scaleValue = 5;
      } else {
        scaleValue -= 0.1;
        if (scaleValue < this.scaleMin) scaleValue = 0.5;
      }
      if (hiprintTemplate) {
        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
        hiprintTemplate.zoom(scaleValue);
        this.scaleValue = scaleValue;
      }
    },
    rotatePaper() {
      if (hiprintTemplate) {
        hiprintTemplate.rotatePaper()
      }
    },
    clearPaper() {
      try {
        hiprintTemplate.clear();
      } catch (error) {
        this.$message.error(`操作失败: ${error}`);
      }
    },
    exportJson() {
      /*Obfuscated by */if(hiprintTemplate){this['jsonOut']=JSON['stringify'](hiprintTemplate['getJson']()||{});updateDataById(this['params']['id'],this['jsonOut'])['then'](_0x16f977=>{this['$modal']['msgSuccess'](_0x16f977['msg']);});}
    },


  }
}
</script>

<style lang="less" scoped>
@import "../../../../public/css/bootstrap.min.css";
// 拖拽
.drag_item_box {

  height: 100%;
  padding: 6px;
}
.hiprintEpContainer{
  
}

.drag_item_box > div {
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drag_item_box > div > a {
  text-align: center;
  text-decoration-line: none;
}

.drag_item_box > div > a > span {
  font-size: 28px;
}

.drag_item_box > div > a > p {
  margin: 0;
}

.drag_item_title {
  font-size: 16px;
  padding: 12px 6px 0 6px;
  font-weight: bold;
}

// 默认图片
/deep/ .hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo/logo.png");
  }
}

// 辅助线样式
/deep/ .toplineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

/deep/ .bottomlineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

/deep/ .leftlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

/deep/ .rightlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

// 设计容器
.card-design {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}

</style>
